<script setup lang='ts'>
import { Edit, OfficeBuilding } from '@element-plus/icons-vue'
import { downloadAuthTemplate } from '@fl/api/supplier'
import { useRouter } from 'vue-router'

const router = useRouter()

function goback() {
    router.back()
}

function goEditName() {
    router.push({ path: '/supplier-pages/enterprise-management/certification/edit/name' })
}

function goEditInfo() {
    router.push({ path: '/supplier-pages/enterprise-management/certification/edit/info' })
}

async function download() {
    try {
        await downloadAuthTemplate()
        ElMessage.success('下载成功')
    }
    catch (error) {
        ElMessage.error('下载失败')
    }
}
</script>

<template>
    <el-card shadow="never">
        <div class="mb-20 text-14 font-700">
            更换企业认证
        </div>

        <div class="my-40 text-18 font-700 text-center">
            请选择认证变更类型
        </div>

        <div class="px-50">
            <div class="p-30 mb-20 border border-#ccc flex justify-between items-center">
                <div class="flex w-80%">
                    <div class="mr-50 flex flex-col min-w-120 justify-center items-center">
                        <el-icon :size="50">
                            <OfficeBuilding />
                        </el-icon>

                        <div class="font-600">
                            企业信息变更
                        </div>
                    </div>

                    <ul>
                        <li>
                            情况一: 法定代表人、类型、经营范围、住所等变更，统一社会信用代码、名称保持不变需要提前准备办理人的身份证正反面照片、最新有效的营业执照高清照片。
                        </li>
                    </ul>
                </div>

                <el-button type="primary"
                           @click="goEditInfo"
                >
                    立即变更
                </el-button>
            </div>

            <div class="p-30 mb-20 border border-#ccc flex justify-between items-center">
                <div class="flex w-80%">
                    <div class="mr-50 flex flex-col min-w-120 justify-center items-center">
                        <el-icon :size="50">
                            <Edit />
                        </el-icon>

                        <div class="font-600">
                            企业名称变更
                        </div>
                    </div>

                    <ul>
                        <li>
                            情况一 : 仅存在单位名称的工商更名，统一社会信用代码保持不变
                        </li>

                        <li>
                            情况二:历史录入等原因导致系统登记的名称与营业执照不一致，统一社会信用代码保持不变
                            需要提前准备办理人的身份证正反面照片、最新有效的营业执照高清照片、盖有最新公司章的企业
                            授权函照片。下载
                            <span class="text-[#6C87F9] cursor-pointer"
                                  @click="download"
                            >
                                《授权函模板》
                            </span>
                        </li>
                    </ul>
                </div>

                <el-button type="primary"
                           @click="goEditName"
                >
                    立即变更
                </el-button>
            </div>
        </div>

        <div class="flex justify-center">
            <el-button @click="goback">
                返回上一页
            </el-button>
        </div>
    </el-card>
</template>

<style lang="scss" scoped>
li {
    margin-bottom: 10px;
}

ul {
    list-style: disc;
}
</style>
